<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery对象拷贝 extend</title>
    <script src="../jquery/jquery.v3.7.1.js"></script>
</head>
<body>
    <div>
        <p>如果想要把某个对象拷贝（合并）给另外一个对象使用，此时可以使用 $.extend() 方法。</p>
        <p>语法：$.extend([deep],target,object1,...)</p>
        <p>1、deep：如果设置为 true，为深拷贝，默认为 false 浅拷贝。</p>
        <p>2、target：要拷贝的目标对象。</p>
        <p>3、object1：待拷贝到第一个对象的对象。</p>
        <p>注：是将对象 object1拷贝给目标对象 target，如果目标对象中有属性，如果是两个对象中共同拥有的属性，那么目标对象中的属性会被覆盖掉，如果对象 object中没有，而目标对象中独有的属性，那么将保留原属性和原属性值。</p>
        <p>浅拷贝：如果对象的属性值是基本数据类型，拷贝的是基本数据类型的值；如果属性值是引用类型，拷贝的是地址值。浅拷贝时，修改其中一个复杂类型的值，会影响目标中心中的值。</p>
        <p>深拷贝：把里面的引用类型的属性所指向的堆内存拷贝一份。深拷贝出来的对象与原来的对象没有任何关系，修改一个不会影响另一个。</p>
    </div>
    <script>
        $(function(){
            var targetObj = {};
            var targetObj1 = {
                id: 0,
                age: 10
            };
            var targetObj2 = {
                id: 0,
                age: 10
            };
            var targetObj3 = {
                id: 0,
                age: 10,
                gender: {
                    sex: '男女'
                }
            };

            var obj = {
                id: 1,
                name: 'andy',
                gender: {
                    man:'男',
                    woman: '女'
                }
            }
            //将obj拷贝给targetObj
            $.extend(targetObj,obj);
            // console.log(targetObj);
            //目标对象中有属性，如果是两个对象中共同拥有的属性，那么目标对象中的属性会被覆盖掉
            //如果对象 object中没有，而目标对象中独有的属性，那么将保留原属性和原属性值
            $.extend(targetObj1,obj);
            // console.log(targetObj1);
            
            // 默认是浅拷贝，浅拷贝是把引用类型属性值所指向堆内存的地址拷贝了一份，修改其中一个时，会影响另一个。
            // targetObj1.gender.man = 'nv';
            //浅拷贝时，如果两个对象中都有相同属性名且属性值不同的属性，那么目标对象中只会有被拷贝对象的属性值。
            // $.extend(targetObj3,obj)
            // console.log(targetObj3);

            //深拷贝 是把里面引用类型属性的值所指向的堆内存拷贝了一份，修改其中一个时，不会影响另一个
            $.extend(true,targetObj2,obj);
            targetObj2.gender.man = 'nv';
            // console.log(targetObj2);
            // console.log(obj);
            //深拷贝时，如果两个对象中都有相同属性名且属性值不同的属性，那么目标对象中会有被拷贝对象的属性值，同时也会保留原属性值。
            $.extend(true,targetObj3,obj);
            console.log(targetObj3);
            console.log(obj);
        })
    </script>
</body>
</html>